<template>
  <div class="appoint-list">
    <div style="background-color: #fff;">
      <div class="p40">
        <div class="record-cell">本周</div>
      </div>
      <ul class="now-week flex-box-container">
        <li v-for="(item, index) in appointList[0]" :key="index" @click="handleClickAppointItem(item.visitDate, item.id)">
          <div>
            <span>{{item.weekDay}}</span>
            <span>{{item.visitDate}}</span>
          </div>
          <div>{{status[item.status]}}</div>
          <div>{{item.realAmount}}/{{item.planAmount}}</div>
        </li>
      </ul>
    </div>
    <div style="background: #fff">
      <div class="p40">
        <div class="record-cell">未来一周</div>
      </div>
      <ul class="future-one-week flex-box-container">
        <li v-for="(item, index) in appointList[1]" :key="index" @click="handleClickAppointItem(item.visitDate, item.id)">
          <div>
            <span>{{item.weekDay}}</span>
            <span>{{item.visitDate}}</span>
          </div>
          <div>{{status[item.status]}}</div>
          <div>{{item.realAmount}}/{{item.planAmount}}</div>
        </li>
      </ul>
    </div>
    <div style="background: #fff">
      <div class="p40">
        <div class="record-cell">未来二周</div>
      </div>
      <ul class="future-two-week flex-box-container">
        <li v-for="(item, index) in appointList[2]" :key="index" @click="handleClickAppointItem(item.visitDate, item.id)">
          <div>
            <span>{{item.weekDay}}</span>
            <span>{{item.visitDate}}</span>
          </div>
          <div>{{status[item.status]}}</div>
          <div>{{item.realAmount}}/{{item.planAmount}}</div>
        </li>
      </ul>
    </div>
    <div class="btn-edit-inquiry" @click="handleClickEdit">{{isEdit ? '保存' : '变更出诊计划'}}</div>
    <div class="appoint-edit-modal" v-show="showEditModal">
      <div class="flex-box-align calendar-modal">
        <div class="flex">日期</div>
        <div class="common-border flex-box-align" @click="handleClickDate">
          <span class="flex">{{visitDate}}</span>
          <img src="../../images/calendar1.png" alt="">
          <div style="" class="click-calendar">
            <calendar :readonly="false" title="" disable-past v-model="visitDate" disable-past></calendar>
          </div>
        </div>
      </div>
      <div class="flex-box-align inquiry-status">
        <div class="flex">出诊状态</div>
        <div class="common-border flex-box-align">
          <selector placeholder="请选择出诊状态" v-model="visitStatus" :options="selectorList" @on-change="handleChangeSelector"></selector>
        </div>
      </div>
      <div class="flex-box-align appoint-num">
        <div class="flex">预约数量</div>
        <div class="common-border flex-box-align">
          <input v-model="planAmount" type="text" maxlength="4" placeholder="请输入">
        </div>
      </div>
      <div class="btns flex-cont">
        <span @click="handleClickCancel">取消</span>
        <span @click="handleClickConfirm">确定</span>
      </div>
    </div>
    <commonMask v-show="showEditModal"></commonMask>
  </div>
</template>
<script>
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  import commonMask from "../common/common-mask.vue";
  import {XButton, Selector, Calendar} from "vux";

  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    data() {
      return {
        appointList: [

        ],
        status: {
          "on": "可预约",
          "off": "休息",
          "full": "约满",
          "none": "无安排"
        },
        selectorList: [
          {key: 'on', value: '出诊'}, {key: 'off', value: '休息'}
        ],
        visitStatus: "",
        planAmount: "",
        isEdit: false,
        showEditModal: false,
        calendar: "",
        calendar1: "",
        visitDate: "",
      }
    },
    components: {
      commonMask,
      XButton,
      Selector,
      Calendar,
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        common.requestAjax(CONSTANT.URL.VISIT.APPOINTDAYDETAIL, {}, {}, (res) => {
          if (res.status == 200) {
            this.appointList = res.data.bussData;
          }
        })
      },
      handleClickAppointItem(date, id) {
        if (this.isEdit) {
          this.showEditModal = true
          this.visitDate = date
        } else {
          this.$router.push({path: "/inquiry/appoint/detail", query: {date: date}})
        }
      },
       handleClickEdit() {
        if (this.isEdit) {
          this.isEdit = false
        } else {
          this.isEdit = true
        }
      },
      handleClickCancel() {
        this.showEditModal = false
      },
      handleClickConfirm() {
        let params = {
          visitStatus: this.visitStatus,
          planAmount: this.planAmount,
          visitDate: this.visitDate
        }
        let self = this;
        common.requestAjax(CONSTANT.URL.VISIT.EDITPLAN, JSON.stringify(params), {}, (res) => {
          if (res.status == 200) {
            this.showEditModal = false
            this.$vux.alert.show({
              title: "提示",
              content: res.msg,
              onShow () {

              },
              onHide () {
                self.getList()
              }
            })
          }
        })

      },
      handleChangeSelector(val) {
        console.log(this.visitStatus)
      },
      handleClickDate() {

      }
    }
  };
</script>
<style lang="less">
  .record-cell {
    border-left: .04rem solid #0063AE;
    padding-left: .14rem;
    position: relative;
    margin-bottom: .4rem;
  }

  .p40 {
    padding: .4rem .3rem 0 .3rem;
  }

  .appoint-list {
    font-size: .34rem;
    height: 100%;
    background-color: #f4f4f4;
    position: relative;
    .btn-edit-inquiry {
      position: fixed;
      width: 100%;
      height: .88rem;
      background-color: #0063AE;
      line-height: .88rem;
      text-align: center;
      left: 0;
      bottom: 0;
      font-size: .34rem;
      color: #fff;
    }
    .appoint-edit-modal {
      position: fixed;
      font-size: .32rem;
      width: 6.9rem;
      height: 6.9rem;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      z-index: 3;
      border-radius: .2rem;
      .common-border {
        border: 1px solid #999;
        border-radius: .04rem;
        width: 3.51rem;
        height: .7rem;
        line-height: .7rem;
        padding: 0 .23rem;
        position: relative;
        .click-calendar {
          position: absolute;
          width: 100%;
          left: 0;
          top: 0;
          bottom: 0;
          z-index: 2;
        }
        input {
          border: none;
          font-size: .32rem;
          &:focus {
            outline: 0;
          }
        }
        .weui-cell_select {
          width: 100%;
        }
        .weui-select {
          padding: 0!important;
        }
        .vux-calendar {
          height: 100%;
        }

        .weui-cell {
          padding: 0!important;
          width: 100%;
          height: 100%;
        }

        .weui-cell_access .weui-cell__ft:after {
          border-style: none!important;
        }
        .vux-cell-value {
          display: none;
        }
      }
      .calendar-modal {
        margin: .93rem .66rem 0 .66rem;
        img {
          width: .4rem;
          height: .44rem;
          vertical-align: middle;
        }
      }
      .inquiry-status {
        margin: .62rem .66rem;
      }
      .appoint-num {
        margin: 0 .66rem 1rem .66rem;
      }
      .btns {
        span {
          width: 2rem;
          height: .77rem;
          line-height: .77rem;
          border-radius: .06rem;
          text-align: center;
          font-size: .3rem;
          &:active {
            opacity: .7;
          }
          &:first-child {
            border: 1px solid #dfdfdf;
            color: #444;
            background-color: #dfdfdf;
            margin-right: .48rem;
          }
          &:last-child {
            border: 1px solid #4581CA;
            color:#fff;
            background-color: #4581CA;
          }
        }
      }
    }
  }

  .now-week, .future-one-week, .future-two-week {
    padding: 0 .3rem;
    margin-bottom: .2rem;
    li {
      width: 1.65rem;
      height: 1.65rem;
      font-size: .24rem;
      background: rgba(255, 255, 255, 1);
      box-shadow: .06rem 1px .06rem rgba(0, 0, 0, 0.1);
      margin-right: .1rem;
      margin-bottom: .2rem;
      /*&:last-child {*/
      /*margin-right: 0;*/
      /*}*/
      &:nth-child(4n) {
        margin-right: 0;
      }
      div {
        text-align: center;
        &:first-child {
          padding-top: .14rem;
          margin-bottom: .12rem;
          overflow: hidden;
          white-space: nowrap;
          span:last-child {
            color: #999;
          }
        }
        &:nth-child(2) {
          margin-bottom: .08rem;
          font-size: .3rem;
        }
        &:last-child {
        }
      }
    }
  }
  .future-two-week {
    margin-bottom: .88rem;
  }

  .v-transfer-dom {
    font-size: .32rem;
  }
</style>
